{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据展示</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="{% static "users/bower_components/bootstrap/dist/css/bootstrap.min.css" %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static "users/bower_components/font-awesome/css/font-awesome.min.css" %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static "users/bower_components/Ionicons/css/ionicons.min.css" %}">
    <!-- ChartJS -->
    <link rel="stylesheet" href="{% static "users/plugins/chart-js-2.8.0/dist/Chart.min.css" %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static "users/dist/css/AdminLTE.min.css" %}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="{% static "users/dist/css/skins/_all-skins.min.css" %}">
    <link rel="stylesheet" href="{% static "users/dist/css/bootstrap-table.min.css" %}">
    <link rel="stylesheet" href="{% static "users/dist/member.css" %}">
    <link rel="stylesheet" href="{% static "users/dist/params.css" %}">

    <!-- 柱状图的js-->
    <script src="{% static "users/dist/g2.js" %}"></script>
{#    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>#}
    {#        <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>#}


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    <style>
        .dataTables_filter > label {
            float: right;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Content Header (Page header) -->
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">数据总表</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <table class="table table-striped table-bordered" style="white-space: nowrap;">
                            <tbody>
                            <tr>
                                <td class="model_key">系统年费用（万元）</td>
                                <td>{{ summary.year_of_system|floatformat:0 }}</td>
                                <td class="model_key">一次能耗（MWh）</td>
                                <td>{{ summary.energy_cons|floatformat:0 }}</td>
                            </tr>

                            <tr>
                                <td class="model_key">投资折合费用（万元）</td>
                                <td>{{ summary.invest|floatformat:0 }}</td>
                                <td class="model_key">能源利用率（%）</td>
                                <td>{% if summary.e_eff %}{{ summary.e_eff|floatformat:2 }}{% else %}/{% endif %}</td>
                            </tr>

                            <tr>
                                <td class="model_key">运行维护费用（万元）</td>
                                <td>{{ summary.opration|floatformat:0 }}</td>
                                <td class="model_key">清洁能源发电占比</td>
                                <td>{{ summary.ce_generation|floatformat:0 }}</td>
                            </tr>

                            <tr>
                                <td class="model_key">燃料购置费（万元）</td>
                                <td>{{ summary.fuel|floatformat:0 }}</td>

                                <td class="model_key">二氧化碳年排放量（吨）</td>
                                <td>{{ summary.co2_em|floatformat:0 }}</td>
                            </tr>

                            <tr>
                                <td class="model_key">售能收益（万元）</td>
                                <td>{{ summary.income|floatformat:0 }}</td>

                                <td class="model_key">氮氧化物年排放量（吨）</td>
                                <td>{{ summary.nox_em|floatformat:0 }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">典型冬季日计算结果</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body" id="box_body_table_1">
                        <table id="table2" class="table table-striped table-bordered" style="white-space: nowrap;">
                            <thead>
                            <tr>
                                <th>编号</th>
                                {% for i in table_head %}
                                    <th>{{ i }}</th>
                                {% endfor %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for i in winter_day %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ i.target_date }}</td>
                                    <td>{{ i.target_time|floatformat:0 }}</td>
                                    <td>{{ i.ice_os|floatformat:0 }}</td>
                                    <td>{{ i.gp_oh|floatformat:0 }}</td>
                                    <td>{{ i.gp_oc|floatformat:0 }}</td>
                                    <td>{{ i.ap_oc|floatformat:0 }}</td>
                                    <td>{{ i.gb_oh|floatformat:0 }}</td>
                                    <td>{{ i.ar_oc|floatformat:0 }}</td>
                                    <td>{{ i.eb_oh|floatformat:0 }}</td>
                                    <td>{{ i.it_dis|floatformat:0 }}</td>
                                    <td>{{ i.ele_buy|floatformat:0 }}</td>
                                    <td>{{ i.ele_pri|floatformat:0 }}</td>
                                    <td>{{ i.gas_buy|floatformat:0 }}</td>
                                    <td>{{ i.gas_pri|floatformat:0 }}</td>
                                    <td>{{ i.heat_buy|floatformat:0 }}</td>
                                    <td>{{ i.heat_pri|floatformat:0 }}</td>
                                    <td>{{ i.ele_sell|floatformat:0 }}</td>
                                    <td>{{ i.ele_inc|floatformat:0 }}</td>
                                    <td>{{ i.wind|floatformat:0 }}</td>
                                    <td>{{ i.PV|floatformat:0 }}</td>
                                    <td>{{ i.cchp_oh|floatformat:0 }}</td>
                                    <td>{{ i.cchp_oc|floatformat:0 }}</td>
                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.col (LEFT) -->
            <div class="col-xs-6">
                <!-- LINE CHART -->
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">典型冬季日供能出力曲线</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body" id="box_body_chart_1">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#chartDiv" aria-controls="home" role="tab"
                                                                      data-toggle="tab">设备供热出力</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                                       data-toggle="tab">热负荷</a></li>
                            <li role="presentation"><a href="#power_winter" aria-controls="power" role="tab"
                                                       data-toggle="tab">供电出力及耗电量曲线</a></li>
                            <li role="presentation"><a href="#power_sum_winter" aria-controls="power" role="tab"
                                                       data-toggle="tab">电负荷</a></li>
                        </ul>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="chartDiv" data-which="{{ which }}"></div>
                            <div role="tabpanel" class="tab-pane" id="profile" data-which="{{ which }}"></div>
                            <div role="tabpanel" class="tab-pane" id="power_winter" data-which="{{ which }}"></div>
                            <div role="tabpanel" class="tab-pane" id="power_sum_winter"
                                 data-which="{{ which }}"></div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->

            </div>
            <!-- /.col (RIGHT) -->
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">典型夏季日计算结果</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <table id="table3" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>编号</th>
                                {% for i in table_head %}
                                    <th>{{ i }}</th>
                                {% endfor %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for i in summer_day %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ i.target_date }}</td>
                                    <td>{{ i.target_time|floatformat:0 }}</td>
                                    <td>{{ i.ice_os|floatformat:0 }}</td>
                                    <td>{{ i.gp_oh|floatformat:0 }}</td>
                                    <td>{{ i.gp_oc|floatformat:0 }}</td>
                                    <td>{{ i.ap_oc|floatformat:0 }}</td>
                                    <td>{{ i.gb_oh|floatformat:0 }}</td>
                                    <td>{{ i.ar_oc|floatformat:0 }}</td>
                                    <td>{{ i.eb_oh|floatformat:0 }}</td>
                                    <td>{{ i.it_dis|floatformat:0 }}</td>
                                    <td>{{ i.ele_buy|floatformat:0 }}</td>
                                    <td>{{ i.ele_pri|floatformat:0 }}</td>
                                    <td>{{ i.gas_buy|floatformat:0 }}</td>
                                    <td>{{ i.gas_pri|floatformat:0 }}</td>
                                    <td>{{ i.heat_buy|floatformat:0 }}</td>
                                    <td>{{ i.heat_pri|floatformat:0 }}</td>
                                    <td>{{ i.ele_sell|floatformat:0 }}</td>
                                    <td>{{ i.ele_inc|floatformat:0 }}</td>
                                    <td>{{ i.wind|floatformat:0 }}</td>
                                    <td>{{ i.PV|floatformat:0 }}</td>
                                    <td>{{ i.cchp_oh|floatformat:0 }}</td>
                                    <td>{{ i.cchp_oc|floatformat:0 }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.col (LEFT) -->
            <div class="col-xs-6">
                <!-- LINE CHART -->
                <div class="box box-info" style="width: 100%">
                    <div class="box-header with-border">
                        <h3 class="box-title">典型夏季日供能出力曲线</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body" style="width: 100%">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#chartDiv1" aria-controls="home" role="tab"
                                                                      data-toggle="tab">设备供冷出力</a></li>
                            <li role="presentation"><a href="#profile1" aria-controls="profile" role="tab"
                                                       data-toggle="tab">冷负荷</a></li>
                            <li role="presentation"><a href="#power_summer" aria-controls="profile" role="tab"
                                                       data-toggle="tab">供电出力及耗电量曲线</a></li>
                            <li role="presentation"><a href="#power_sum_summer" aria-controls="profile" role="tab"
                                                       data-toggle="tab">电负荷</a></li>
                        </ul>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="chartDiv1" data-which="{{ which }}"
                                 style="margin-top: 10px">
                                {#                                <canvas id="myChart1"></canvas>#}
                            </div>
                            <div role="tabpanel" class="tab-pane" id="profile1" data-which="{{ which }}"></div>
                            <div role="tabpanel" class="tab-pane" id="power_summer" data-which="{{ which }}"></div>
                            <div role="tabpanel" class="tab-pane" id="power_sum_summer"
                                 data-which="{{ which }}"></div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->

            </div>
            <!-- /.col (RIGHT) -->
        </div>
        <!-- /.row -->

    </section>
    <!-- /.content -->
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src={% static "users/bower_components/jquery/dist/jquery.min.js" %}></script>
<!-- Bootstrap 3.3.7 -->
<script src={% static "users/bower_components/bootstrap/dist/js/bootstrap.min.js" %}></script>
<!-- ChartJS -->
<script src={% static "users/plugins/chart-js-2.8.0/dist/Chart.min.js" %}></script>
<!-- FastClick -->
<script src={% static "users/bower_components/fastclick/lib/fastclick.js" %}></script>
<!-- AdminLTE App -->
<script src={% static "users/dist/js/adminlte.min.js" %}></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'users/bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'users/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
<script src={% static "users/dist/echarts.min.js" %}></script>
<script src={% static "users/dist/data_content.js" %}></script>
</body>

</html>